<template>
  <div class="container">
    <!-- 查询条件 -->
     <span>设备号</span>
    <el-input v-model="queryParam.device_code" style="width: 240px" placeholder="Please input" />

       <el-button @click="handleQuery" type="primary">查询</el-button>
    <!-- 数据表格 -->
    <el-table
      :data="queryParams"
      style="width: 100%">
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="device_code" label="设备号"></el-table-column>
      <el-table-column prop="enter_time" label="创建日期"></el-table-column>
      <el-table-column prop="port_url" label="接口名"></el-table-column>
      <el-table-column prop="unit_no" label="单元"></el-table-column>
      <el-table-column prop="json_content" label="Json日志"></el-table-column>
      <el-table-column prop="json_response" label="返回参数"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      class="pagination">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查询参数
      queryParams:[{
        id:"",
        device_code:"",
        enter_time:"",
        port_url:"",
        json_content:"",
        json_response:"",
        unit_no:""
      }],
      // 表格数据
      queryParam:[
      {
        device_code:"",
        enter_time:"",
        port_url:"",
        json_content:"",
        json_response:"",
        unit_no:""
      }
      ],
      // 分页数据
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      // 模拟数据
      mockData: []
    }
  },
  created() {
  },
  methods: {
    // 生成数据
    generateMockData() {
      this.$axios.get('/MesRawData2',{
        params:{
          pageNum:this.pagination.currentPage,
          pageSize:this.pagination.pageSize,
          device_code:this.queryParam.device_code
        }
      }).then(result=>{
            this.queryParams=result.data.list;
            this.pagination.total=result.data.total;
        }).catch(err=>{
            alert(err)
        })
    },
    fetchData(){
      this.generateMockData();
    },
    // 查询处理
    handleQuery() {
      this.pagination.currentPage = 1
      this.generateMockData();
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.fetchData();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.fetchData();
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}
.query-form {
  margin-bottom: 20px;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>